<template>
  <div class="main">
    <input type="text" @focus="suggest" placeholder="大家都在搜 许嵩" />
    <p class="tit">热搜榜</p>
    <ul class="hotsearch">
      <li
        v-for="(item, index) in hotSearchList"
        :key="item.id"
        @click="getHot(item.searchWord)"
      >
        <span> {{ index + 1 }} </span>
        <span>{{ item.searchWord }}</span>
      </li>
    </ul>
    <p @click="more1()" v-show="showHot1" class="more">
      展开更多热搜
      <van-icon name="arrow" />
    </p>
    <p class="tit">音乐专区</p>
    <div class="musicSort">
      <div @click="$router.push('/singerSort')">
        <p>歌手分类</p>
        <p>选择你喜欢的歌手</p>
      </div>
      <div>
        <p>曲风分类</p>
        <p>查看你的专属曲风分类</p>
      </div>
      <div>
        <p>影视原生专区</p>
        <p>选听歌追剧好时光</p>
      </div>
      <div>
        <p>电音专区</p>
        <p>全球热门电音嗨翻全场</p>
      </div>
      <div>
        <p>说唱专区</p>
        <p>说唱人物志Vol.6</p>
      </div>
      <div>
        <p>摇滚专区</p>
        <p>国摇新生势力等你来听</p>
      </div>
      <div>
        <p>古典专区</p>
        <p>大咖Vlo.2:古典VS流行</p>
      </div>
      <div>
        <p>AGG专区</p>
        <p>测测你是AGG大粉头吗</p>
      </div>
      <div>
        <p>DJ专区</p>
        <p>潮流热歌一网打尽</p>
      </div>
      <div>
        <p>亲子专区</p>
        <p>陪伴宝贝一起成长</p>
      </div>
      <div>
        <p>中国特色专区</p>
        <p>了解中国传统经典文化</p>
      </div>
      <div>
        <p>经典专区</p>
        <p>致敬时代，留住经典</p>
      </div>
    </div>
    <p @click="more2()" v-show="showHot2" class="more">
      展开更多专区
      <van-icon name="arrow" />
    </p>
    <p class="tit">推荐活动</p>
    <div class="activities">
      <p>古典专区，钢琴奥林匹克大赛</p>
      <p>关注音乐好朋友，限量抽取蓝牙音箱耳机</p>
      <p>测测你的乐迷等级</p>
      <p>晴空最灿烂的音乐放歌</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotSearchList: [],
      showHot1: true,
      showHot2: true,
      showSuggest: true,
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 聚焦后到关键词检索
    suggest() {
      this.$router.push({
        path: "/search/suggest",
      });
    },
    //获取热搜列表
    async gethotsearch() {
      const res = await this.$http.get(
        "http://localhost:3000/search/hot/detail"
      );
      this.hotSearchList = res.data.data;
      console.log(this.hotSearchList);
    },
    //展开热搜
    more1() {
      document.querySelector(".hotsearch").style.height = "300px";
      this.showHot1 = false;
    },
    more2() {
      document.querySelector(".musicSort").style.height = "400px";
      this.showHot2 = false;
    },
    // 点击热搜列表，跳转到此列表页面
    getHot() {},
  },
  created() {
    this.gethotsearch();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.tit {
  margin: 15px 0;
  font-size: 13px;
  font-weight: bold;
}
input {
  width: 98%;
  height: 32px;
  line-height: 32px;
  padding: 2px 15px;
  box-sizing: border-box;
  border: none;
  background: rgb(245, 245, 245);
  border-bottom: 1px solid rgb(197, 197, 197);
}
::-webkit-input-placeholder {
  font-size: 13px;
  color: rgb(117, 117, 117);
}
.hotsearch {
  width: 100%;
  height: 145px;
  background: color;
  border: 1px solid rgb(223, 223, 223);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.hotsearch li {
  width: 50%;
  line-height: 1.8;
  display: flex;
}
.hotsearch li span:first-child {
  width: 25px;
  font-size: 15px;
}
.hotsearch li span:last-child {
  font-size: 14px;
  margin-left: 3px;
}
.more {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
}
.musicSort {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 190px;
  overflow: hidden;
}
.musicSort > div {
  border: 1px solid rgb(165, 165, 165);
  width: 48%;
  height: 55px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.musicSort > div p:first-child {
  color: #fff;
  font-size: 15px;
}
.musicSort > div p:last-child {
  color: rgb(236, 236, 236);
  font-size: 13px;
}
.musicSort > div:first-child {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.musicSort > div:nth-child(2) {
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
}
.musicSort > div:nth-child(3) {
  background-image: linear-gradient(
    -225deg,
    #ffe29f 0%,
    #ffa99f 48%,
    #ff719a 100%
  );
}
.musicSort > div:nth-child(4) {
  background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
.musicSort > div:nth-child(5) {
  background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}
.musicSort > div:nth-child(6) {
  background-image: linear-gradient(
    to top,
    #ff9a9e 0%,
    #fecfef 99%,
    #fecfef 100%
  );
}
.musicSort > div:nth-child(7) {
  background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%);
}
.musicSort > div:nth-child(8) {
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
.musicSort > div:nth-child(9) {
  background-image: linear-gradient(
    to right,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
}
.musicSort > div:nth-child(10) {
  background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
}
.musicSort > div:nth-child(11) {
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
}
.musicSort > div:nth-child(12) {
  background-image: linear-gradient(
    -225deg,
    #77ffd2 0%,
    #6297db 48%,
    #1eecff 100%
  );
}
.activities {
  font-size: 14px;
}
.activities p {
  margin-bottom: 10px;
}
</style>
